body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #0c192c;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.bubbles {
    position: relative;
    display: flex;
    justify-content: space-around;

    .bubble {
        position: relative;
        width: 15px;
        height: 15px;
        background: #4fc3dc;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #4fc3dc44, 0 0 20px #4fc3dc, 0 0 50px #4fc3dc;
        animation: rise 7s linear infinite;
        animation-duration: calc(60s / var(--i));

        &:nth-child(even) {
            background: #ff2d75;
            box-shadow: 0 0 0 5px #ff2d7544, 0 0 20px #ff2d75, 0 0 50px #ff2d75;
        }
    }
}

@keyframes rise {
    from {
        transform: translateY(400px) scale(0.3);
    }
    to {
        transform: translateY(-80px) scale(0.9);
    }
}
